<template>
  <div class="pageContainer">
    <h3 style="margin-bottom: 30px;">可乐币</h3>
    <div class="oneLineFlex" style="flex-wrap: wrap;">
      <div class="oneLineFlex" style="margin-right: 40px;">
        <div class="formLabel">用户编号:</div>
        <el-input v-model="param.userNo" placeholder="请输入编号" class="inputStyle" />
      </div>
      <div class="oneLineFlex" style="margin-right: 40px;">
        <div class="formLabel">任务名称:</div>
        <el-input v-model="param.mission" placeholder="请输入任务名称"  class="inputStyle" />
      </div>
      <div class="oneLineFlex">
        <div class="basicSearchLightBtn"  @click="getTableData">
          <img src="@/assets/svg/white-search.svg" class="btnIcon" style="margin-right: 8px;" alt="">
          <div>查询</div>
        </div>
        <div class="basicSearchBtn" style="margin-left: 8px;" @click="reset">
          <img src="@/assets/svg/reset.svg" style="margin-right: 8px;" class="btnIcon" alt="">
          <div>重置</div>
        </div>
      </div>
    </div>
    <div style="margin-top:16px;">
      <el-table :data="tableData" fit  class="tableAuto" tableLayout="auto">
        <el-table-column label="流水号" prop="id" width="280px"></el-table-column>
        <el-table-column label="任务名" prop="mission" width="280px">
          <template slot-scope="scope">
            <div class="content-width-control">{{ scope.row.mission }}</div>
          </template>
        </el-table-column>
        <el-table-column label="摄手编号" prop="userNo" ></el-table-column>
        <el-table-column label="时间" prop="createDate" ></el-table-column>
        <el-table-column label="数量" prop="number" ></el-table-column>
        <el-table-column label="类型" prop="kind"></el-table-column>
        <el-table-column label="操作账号" prop="username"  width="140px"></el-table-column>

      </el-table>
    </div>
    <div style="margin-top:40px;">
      <el-pagination
          style="text-align: right; margin-top:20px;"
          @current-change="handleSizeChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>

import {getCoinList} from "@/api/money";

export default  {
  name:"CokeCoin",
  data() {
    return{
      tableData: [],
      target: {},
      pageSize: 10,
      pageNo: 1,
      total: 0,
      param: {
        userNo: undefined,
        mission: undefined
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    handleSizeChange(e) {
      this.pageNo = e
      this.getTableData()
    },
    reset() {
      this.param = {
        userNo: undefined,
        mission: undefined
      }
      this.pageNo = 1
      this.getTableData()
    },
    getTableData() {
      const requestParam = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        param: this.param
      }
      getCoinList(requestParam).then(res =>{
        if (res) {
          this.total = res.count
          this.tableData = res.list
        }
      })

    }

  }
}
</script>
<style lang="scss" scoped>
.pageContainer {
  padding: 39px 32px;
  background: #FFFFFF;
}
.oneLineFlex {
  display: flex;
  align-items: center;
}
.inputStyle {
  width: 232px;
  ::v-deep.el-input__inner {
    color: #333333 !important;
  }
}
.content-width-control {
  max-width: 305px; /* 调整此值以改变文本的最大显示宽度 */
}

.formLabel {
  margin-right: 8px;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}

::v-deep .el-table .cell .action {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
</style>
